@extends('admin::layouts.master')

<style>
  .btn-outline-secondary{
    white-space: nowrap;
  }
</style>
@section('title', __('admin/order.orders_incoming_word'))

@section('page-bottom-btns')
@hook('order.detail.title.right')
@endsection

@section('content')

  @hookwrapper('admin.order.form.address')
  <div class="card mb-4">
    <div class="card-header"><h6 class="card-title">{{ __('order.address_info') }}</h6></div>
    <div class="card-body">
      <table class="table">
        <tbody>
          <tr>
            <td>
              <div>
                {{ __('address.name') }}：{{ $order->payment_customer_name }}
                @if ($order->payment_telephone)
                ({{ $order->payment_telephone }})
                @endif
              </div>
              <div>
                {{ __('address.address') }}：
<!--                {{ $order->payment_country }}-->
                {{ $order->payment_zone }}
                {{ $order->payment_city }}
                {{ $order->payment_address_1 }}
                {{ $order->payment_address_2 }}
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  @endhookwrapper



  @hookwrapper('admin.order.form.products')
  <div class="card mb-4" id="customer-app-form">
    <div class="card-header"><h6 class="card-title">{{ __('order.product_info') }}</h6></div>
    <div class="card-body">
      <div class="table-push">
        <el-tabs>
          <table class="table ">
            <thead class="">
            <tr>
<!--              <th>ID</th>-->
              <th>{{ __('product.imagen') }}</th>
              <th>{{ __('product.product_description') }}</th>
              <th>{{ __('product.sku') }}</th>
              <th>{{ __('product.unit_price') }}</th>
              <th>{{ __('product.number') }}</th>
              <th class="text-end">{{ __('product.total') }}</th>
            </tr>
            </thead>
            <tbody>
            @foreach ($order->orderProducts as $key => $product)
            <tr>
<!--              <td>{{ $product->product_id }}</td>-->
              <td>
                <div style="display: none" id="product_{{ $key }}"
                     data-name="{{ $product->name }}"
                     data-quantity="{{ $product->quantity }}"
                     data-product_id="{{ $product->product_id }}"
                     data-price="{{ trim($product->price,'0.')}}"
                     data-sku="{{ $product->product_sku }}"></div>
                <div class="d-flex align-items-center">
                  <div class="wh-60 me-2"><img src="{{ $product->image }}" class="img-fluid max-h-100"></div>
                </div>
              </td>
              <td class="">{{ $product->name }}</td>
              <td class="">{{ $product->product_sku }}</td>
              <td>
                {{ currency_format($product->price, $order->currency_code, $order->currency_value) }}
              </td>
              <td>
                {{ $product->quantity }}
              </td>
              <td class="text-end">
                {{ currency_format($product->price * $product->quantity, $order->currency_code, $order->currency_value) }}
              </td>
            </tr>
            <tr>
              <td></td>
              <td>
                <button class="btn btn-outline-secondary btn-sm" type="button"  @click="editAddress('{{ $key }}','name')">{{ __('common.edit') }}</button>
              </td>
              <td>
                <button class="btn btn-outline-secondary btn-sm" type="button"  @click="editAddress('{{ $key }}','product_sku')">{{ __('common.edit') }}</button>
              </td>
              <td>
                <button class="btn btn-outline-secondary btn-sm" type="button"  @click="editAddress('{{ $key }}','price')">{{ __('common.edit') }}</button>
              </td>
              <td>
                <button class="btn btn-outline-secondary btn-sm" type="button"  @click="editAddress('{{ $key }}','quantity')">{{ __('common.edit') }}</button>
              </td>
              <td>
<!--                <button class="btn btn-outline-secondary btn-sm" type="button"  @click="editAddress('{{ $key }}','price_all')">{{ __('common.edit') }}</button>-->
              </td>
            </tr>
            @endforeach
            </tbody>
            <tfoot>
            @foreach ($order->orderTotals as $orderTotal)
            <tr>
              <td colspan="5">{{__('common.'.$orderTotal->code)}}</td>
              <td class="text-end"><span class="fw-bold">{{ currency_format($orderTotal->value, $order->currency_code, $order->currency_value) }}</span></td>
            </tr>
            @if ($orderTotal->code == 'shipping')
            <tr>
              <td colspan="5" ></td>
              <td>
                <button class="btn btn-outline-secondary btn-sm" type="button"  @click="editTotal('{{ $orderTotal->id }}','{{$orderTotal->code}}','{{trim($orderTotal->value,'0.')}}')">{{ __('common.edit') }}</button>
              </td>
            </tr>
            @endif
            @endforeach
            </tfoot>
          </table>
          <div style="text-align: right;">
            <button type="button" data-id="{{ $order->id }}"  class="btn btn-outline-primary btn-sm incoming-btn">{{ __('admin/order.btn_export_ok') }}</button>
          </div>

        </el-tabs>
      </div>
    </div>


    <el-dialog title="{{ __('admin/common.edit') }}" :visible.sync="dialog.show"  @close="closeAddressDialog('addressForm')">
      <el-form ref="addressForm"  :model="dialog.form" label-width="100px">
        <el-form-item :label="dialog.label" prop="update_data" id="div1_show" :style="dialog.div1_show_style">
          <el-input v-model="dialog.form.update_data"></el-input>
        </el-form-item>

        <el-form-item :label="dialog.label_textarea"  prop="textarea" id="div2_show"  :style="dialog.div2_show_style">
          <el-textarea v-model="dialog.form.textarea"></el-textarea>
          <textarea rows="4" type="text" name="descriptions" class="form-control"  v-model="dialog.form.update_data"></textarea>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="formSubmit('addressForm')">{{ __('common.save') }}</el-button>
          <el-button @click="closeAddressDialog('addressForm')">{{ __('common.cancel') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <el-dialog title="{{ __('admin/common.edit') }}" :visible.sync="dialog_total.show"  @close="closeDialog('form')">
      <el-form ref="form"  :model="dialog_total.form" label-width="100px">
        <el-form-item label="运费" prop="value" >
          <el-input v-model="dialog_total.form.value"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="formSubmit_total('form')">{{ __('common.save') }}</el-button>
          <el-button @click="closeDialog('form')">{{ __('common.cancel') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  @endhookwrapper


  @if ($order->orderShipments)
  @hookwrapper('admin.order.form.shipments')
  <div class="card mb-4">
    <div class="card-header"><h6 class="card-title">{{ __('order.order_shipments') }}</h6></div>
    <div class="card-body">
      <div class="table-push">
        <table class="table ">
          <thead class="">
          <tr>
            <th>{{ __('order.express_company') }}</th>
            <th>{{ __('order.express_number') }}</th>
            <th>{{ __('order.updated_at') }}</th>
          </tr>
          </thead>
          <tbody>
          @foreach ($order->orderShipments as $ship)
          <tr data-id="{{ $ship->id }}">
            <td>
              <div class="edit-show">{{ $ship->express_company }}</div>

              <select class="form-select edit-form express-code d-none" aria-label="Default select example">
                @foreach (system_setting('base.express_company', []) as $item)
                <option value="{{ $item['code'] }}" {{ $ship->express_code == $item['code'] ? 'selected' : '' }}>{{ $item['name'] }}</option>
                @endforeach
              </select>
            </td>
            <td>
              <div class="edit-show">{{ $ship->express_number }}</div>
              <input type="text" class="form-control edit-form express-number d-none" placeholder="{{ __('order.express_number') }}" value="{{ $ship->express_number }}">
            </td>
            <td class="d-flex justify-content-between align-items-center">
              {{ $ship->created_at }}
              <div class="btn btn-outline-primary btn-sm edit-shipment">{{ __('common.edit') }}</div>
              <div class="d-none shipment-tool">
                <div class="btn btn-primary btn-sm">{{ __('common.confirm') }}</div>
                <div class="btn btn-outline-secondary btn-sm">{{ __('common.cancel') }}</div>
              </div>
            </td>
          </tr>
          @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
  @endhookwrapper
  @endif
@endsection

@push('footer')
<script>
  $('.edit-shipment').click(function() {
    $(this).siblings('.shipment-tool').removeClass('d-none');
    $(this).addClass('d-none');

    $(this).parents('tr').find('.edit-show').addClass('d-none');
    $(this).parents('tr').find('.edit-form').removeClass('d-none');
  });

  $('.shipment-tool .btn-outline-secondary').click(function() {
    $(this).parent().siblings('.edit-shipment').removeClass('d-none');
    $(this).parent().addClass('d-none');

    $(this).parents('tr').find('.edit-show').removeClass('d-none');
    $(this).parents('tr').find('.edit-form').addClass('d-none');
  });

  $('.shipment-tool .btn-primary').click(function() {
    const id = $(this).parents('tr').data('id');
    const express_code = $(this).parents('tr').find('.express-code').val();
    const express_name = $(this).parents('tr').find('.express-code option:selected').text();
    const express_number = $(this).parents('tr').find('.express-number').val();

    $(this).parent().siblings('.edit-shipment').removeClass('d-none');
    $(this).parent().addClass('d-none');

    $(this).parents('tr').find('.edit-show').removeClass('d-none');
    $(this).parents('tr').find('.edit-form').addClass('d-none');

    $http.put(`/orders/{{ $order->id }}/shipments/${id}`, {express_code,express_name,express_number}).then((res) => {
      layer.msg(res.message);
      window.location.reload();
    })
  });

  let app = new Vue({
    el: '#customer-app-form',
    data: {
      dialog: {
        label:"{{ __('order.product_price') }}",
        show: false,
        div1_show_style:'display:none',
        div2_show_style:'',
        form: {
          update_data:'',
          product_id:0,
          type:'',
        },
      },
      dialog_total: {
        show: false,
        form: {
          id:0,
          value:0,
          code:'',
        }
      },
      rules: {
        name: [{required: true, message: "{{ __('common.error_required', ['name' => __('admin/customer.user_name')] ) }}", trigger: 'blur'}, ],
      },

    },

    methods: {
      editAddress(divId,type) {

        let div_data = $('#product_'+divId).data();
        let dialog_label = '';
        let dialog_value = '';
        // console.log(div_data,type);
        this.dialog.show = true;
        switch (type) {
          case 'name':
            dialog_label = "{{ __('product.product_description') }}";
            dialog_value = div_data.name;
            break;
          case 'product_sku':
            dialog_label = "{{ __('product.sku') }}";
            dialog_value = div_data.sku;
            break;
          case 'price':
            dialog_label = "{{ __('product.precio') }}";
            dialog_value = div_data.price;
            break;
          case 'quantity':
            dialog_label = "{{ __('product.quantity') }}";
            dialog_value = div_data.quantity;
            break;
          case 'price_all':
            dialog_label = "{{ __('product.total') }}";
            dialog_value = div_data.price * div_data.quantity;
            break;
        }
        if(type == 'name'){
          this.dialog.label_textarea = dialog_label;
          // this.dialog.form.textarea = dialog_value;
          this.dialog.div1_show_style = 'display:none';
          this.dialog.div2_show_style = '';
          // $("#div2_show").show();
          // $("#div1_show").hide();
        }else{
          this.dialog.label = dialog_label;
          this.dialog.div2_show_style = 'display:none';
          this.dialog.div1_show_style = '';
          // $("#div1_show").show();
          // $("#div2_show").hide();
        }
        this.dialog.form.update_data = dialog_value;
        this.dialog.form.product_id = div_data.product_id;
        this.dialog.form.type = type;
      },

      closeAddressDialog(form) {
        this.$refs[form].resetFields();
        Object.keys(this.dialog.form).forEach(key => this.dialog.form[key] = '')
        this.dialog.show = false
      },

      formSubmit(form) {
        const self = this;

        // this.$refs[form].validate((valid) => {
        //   console.log(valid);
        //   if (!valid) {
        //     this.$message.error('{{__('common.error_form')}}');
        //     return;
        //   }
        //   $.ajax({
        //     url: `/admin/orders/update/{{ $order->id }}`,
        //     data: self.dialog.form,
        //     type: 'put',
        //     success: function(res) {
        //       self.$message.success(res.message);
        //       self.$refs[form].resetFields();
        //       self.dialog.show = false
        //       setTimeout(function () {
        //         location.reload()
        //       },1500)
        //
        //     }
        //   })
        $http.put(`/orders/update/{{ $order->id }}`,  self.dialog.form).then((res) => {
          layer.msg(res.message);
          window.location.reload();
        })
        // });
      },

      editTotal(id,code,value){
        console.log(id,code,value);
        this.dialog_total.form.id = id;
        this.dialog_total.form.value = value;
        this.dialog_total.form.code = code;
        this.dialog_total.show = true;
      },
      closeDialog(form) {
        this.$refs[form].resetFields();
        Object.keys(this.dialog_total.form).forEach(key => this.dialog_total.form[key] = '')
        this.dialog_total.show = false
      },
      formSubmit_total(form){
        const self = this;
        $http.put(`/orders/update_total/`+this.dialog_total.form.id,  self.dialog_total.form).then((res) => {
          layer.msg(res.message);
          window.location.reload();
        })
      }

    }
  });

  $('.incoming-btn').click(function(event) {
    const number = $(this).data('number');
    window.open("{{ admin_route('orders.export_incoming_word', [$order->id]) }}", '_blank');
    // window.location = "{{ admin_route('orders.export_incoming_word', [$order->id]) }}"
  });
</script>
@endpush

